<template>
  <div>
    <config-grid v-show="!type || type === 'grid'" :globalGridAttr="globalGridAttr" />
    <config-node v-show="type === 'node'" :globalGridAttr="globalGridAttr" :cell="cell" />
    <config-edge v-show="type === 'edge'" :globalGridAttr="globalGridAttr" :cell="cell" />
  </div>
</template>

<script>
import FlowGraph from '../../graph'
import defaultAttr from '../../graph/config'
import ConfigEdge from './ConfigEdge/index.vue'
import ConfigGrid from './ConfigGrid/index.vue'
import ConfigNode from './ConfigNode/index.vue'

export default {
  name: 'Index',
  components: {
    ConfigGrid,
    ConfigNode,
    ConfigEdge
  },
  data() {
    return {
      type: 'grid',
      id: '',
      globalGridAttr: defaultAttr,
      cell: null
    }
  },
  mounted() {
    setTimeout(() => {
      this.boundEvent()
    }, 200)
  },
  methods: {
    boundEvent() {
      const { graph } = FlowGraph
      graph.on('selection:changed', ({ selected }) => {
        if (selected.length === 1) {
          this.cell = selected[0]
          this.type = this.cell.isNode() ? 'node' : 'edge'
        } else {
          this.cell = null
          this.type = 'grid'
        }
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
